<template>
	<view class="record-container">
		<!-- 门诊病历 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="pad-10">
			<view class="item">
				<view class="border-col ">基本信息</view>
				<view class="">
					<view class="start-center">
						<view class="base-title">就诊人</view>
						<view>：{{data.patName}}{{data.patSex}}{{data.patAge}}岁</view>
					</view>
					<view class="start-center">
						<view class="base-title">医生</view>
						<view>：{{data.doctorName}} {{data.departmentName}}</view>
					</view>
					<view class="start-center">
						<view class="base-title">病历号</view>
						<view>：{{data.emrCode}}</view>
					</view>
					<view class="start-center  baseline">
						<view class="base-title">诊断结果</view>
						<view class="flex-start flex-1">
							<view>：</view>
							<text class="flex-1">{{data.mainTestResults}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view>
					<view class="border-col ">主诉</view>
					<view class="pad-10">{{data.cheifComplaint}}</view>
				</view>
				<view>
					<view class="border-col ">既往史</view>
					<view class="pad-10">
						<text>{{data.preHistory}}</text>
					</view>
				</view>
				<view>
					<view class="border-col ">过敏史</view>
					<view class="pad-10">
						<text>{{data.allergy}}</text>
					</view>
				</view>
				<view>
					<view class="border-col ">家族史</view>
					<view class="pad-10">
						<text>{{data.familyHistory}}</text>
					</view>
				</view>
				<view>
					<view class="border-col ">婚育史</view>
					<view class="pad-10">
						<text>{{data.marryHistory}}</text>
					</view>
				</view>
				<view v-if="data.medicalRecordImg">
					<view class="border-col ">病历资料</view>
					<view class="pad-10 flex-wrap">
						<view v-for="(item,index) in data.medicalRecordImg.split(',')" class="mar-5">
							<u-image @click="previewImage(item)" width="100px" height="100px"
								:src="hostApi+item"></u-image>
						</view>
					</view>
				</view>
				<view>
					<view class="border-col ">药品医嘱</view>
					<view class="pad-10">
						<text>{{data.medicationRecommendations}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-image-preview :show="showPreview" :urls="imageUrls" @close="showPreview = false">
		</u-image-preview> -->

	</view>
</template>

<script>
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			UserInfoCardVue
		},
		computed: {
			...mapGetters([
				'hostApi'
			]),
		},
		data() {
			return {
				data: {},
				showPreview: false,
				imageUrls: [],
			}
		},
		onLoad(e) {
			this.data = JSON.parse(e.item);
			console.log(this.data)
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					current: 0, // 当前显示图片的索引
					urls: [this.hostApi + url], // 需要预览的图片链接列表
					indicator: 'default' // 图片指示器样式
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .border-col {
	// 	width: 1px;
	// 	height: 20px;
	// 	border: 1px solid blue;
	// 	margin: 10px 5px 10px 0;
	// }

	.item {
		border-radius: 10px;
		background-color: white;
		padding: 10px;
		margin: 10px 0;
	}

	.base-title {
		width: 80px;
		text-align: justify;
		line-height: 30px;
		text-align-last: justify;
		color: gray;

	}
</style>